<link rel="stylesheet" href="__PUBLIC__/Static/js/jsPlumb/topo-all.css">
<link rel="stylesheet" href="__PUBLIC__/Static/js/jsPlumb/topo.css">
<style type="text/css">
.node {
	height: 100px;
}
</style>

<!-- DEP -->
<script src="__PUBLIC__/Static/js/jsPlumb/jquery-1.9.0-min.js"></script>
<script src="__PUBLIC__/Static/js/jsPlumb/jquery-ui-1.9.2-min.js"></script>
<!-- /DEP -->
		
<!-- JS -->
<!-- support lib for bezier stuff -->
<script src=".__PUBLIC__/Static/js/jsPlumb/jsBezier-0.6-min.js"></script> 
<!-- jsplumb geom functions -->   
<script src="__PUBLIC__/Static/js/jsPlumb/jsplumb-geom-0.1.js"></script>
<!-- jsplumb util -->
<script src="__PUBLIC__/Static/js/jsPlumb/util.js"></script>
<!-- base DOM adapter -->
<script src="__PUBLIC__/Static/js/jsPlumb/dom-adapter.js"></script>        
<!-- main jsplumb engine -->
<script src="__PUBLIC__/Static/js/jsPlumb/jsPlumb.js"></script>
<!-- endpoint -->
<script src="__PUBLIC__/Static/js/jsPlumb/endpoint.js"></script>                
<!-- connection -->
<script src="__PUBLIC__/Static/js/jsPlumb/connection.js"></script>
<!-- anchors -->
<script src="__PUBLIC__/Static/js/jsPlumb/anchors.js"></script>        
<!-- connectors, endpoint and overlays  -->
<script src="__PUBLIC__/Static/js/jsPlumb/defaults.js"></script>
<!-- connector editors -->
<script src="__PUBLIC__/Static/js/jsPlumb/connector-editors.js"></script>
<!-- bezier connectors -->
<script src="__PUBLIC__/Static/js/jsPlumb/connectors-bezier.js"></script>
<!-- state machine connectors -->
<script src="__PUBLIC__/Static/js/jsPlumb/connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="__PUBLIC__/Static/js/jsPlumb/connectors-flowchart.js"></script>        
<!-- SVG renderer -->
<script src="__PUBLIC__/Static/js/jsPlumb/renderers-svg.js"></script>
<!-- canvas renderer -->
<script src="__PUBLIC__/Static/js/jsPlumb/renderers-canvas.js"></script>
<!-- vml renderer -->
<script src="__PUBLIC__/Static/js/jsPlumb/renderers-vml.js"></script>
<!-- jquery jsPlumb adapter -->
<script src="__PUBLIC__/Static/js/jsPlumb/jquery.jsPlumb.js"></script>
<!-- /JS -->

<!-- code -->
<script src="__STYLE__/js/drawtopo.js"></script>

<script type="text/javascript">
	jsPlumb.bind("ready", function() {
		
		// 拓扑数据结构根节点位置设置
		var rootPosition = [0, 0];
		var nodeTypeArray = ['VM', 'DEVICE', 'NC', 'VIP'];
		var topoData = {$jsonTree};
		
		drawTopo(topoData, rootPosition, nodeTypeArray);
		
		/*var newTopoData = {
			type: 'VM',
	    	key: '10.242.192.2',
	    	rel: [
                { type: 'VM', key: '110.75.188.140' }
	    	]	
		};
		
        var mergedTopoData = mergeNewTopo(topoData, newTopoData);
		$('#topoRegion').empty();
		drawTopo(mergedTopoData, rootPosition, nodeTypeArray);*/
		
	});
</script>

<div id="topoRegion" style="overflow: scroll; height: 600px;">
</div>